<p style="text-align: center;margin: 10px 0;">
    <a [ngClass]="{ 'disabled': pIndex === 0 }" style="margin: 0 10px;" (click)="before()">上一页</a>
    <a [ngClass]="{ 'disabled': pIndex === 2 }" style="margin: 0 10px;"  (click)="after()">下一页</a>
</p>
<div style="background-color:#fff;display: flex;justify-content: center;align-items: center;margin: 0 auto;"
     [style.width.px]="projectParmas.width"
     [style.height.px]="projectParmas.height"
>
    <div *ngIf="componentList.length > 0" class="preview">
        <div class="scene-center" style="background: #fff">
            <ng-container *ngFor="let data of componentList; let i = index;">
                <div class="c-txt"

                     *ngIf="data.name == 'txt'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-txt
                        [data]="data.data"
                    ></app-c-txt>
                </div>
                <div class="c-img"
                     *ngIf="data.name == 'img'"

                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-img
                        [src]="data.data.src"
                    ></app-c-img>
                </div>
                <div class="c-web"
                     *ngIf="data.name == 'web'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                >
                    <app-c-web
                        [data]="data.data"
                    ></app-c-web>
                </div>
                <div class="c-pdf"
                     *ngIf="data.name == 'pdf'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-pdf
                        [src]="data.data.src"
                    ></app-c-pdf>
                </div>
                <div class="c-video"
                     *ngIf="data.name == 'video'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-video
                        [src]="data.data.src"
                        [control] = "control"
                        [controls] = "true"
                    ></app-c-video>
                </div>
                <div class="c-audio"
                     *ngIf="data.name == 'audio'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-audio
                        [src]="data.data.src"
                        [control] = "control"
                    ></app-c-audio>
                </div>
                <div class="c-button"
                     *ngIf="data.name == 'button'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-button
                        [data]="data.data"
                    ></app-c-button>
                </div>
                <div class="c-select"
                     *ngIf="data.name == 'SG_select'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-select
                        [data]="data.data"
                    ></app-c-select>
                </div>

                <div class="c-tieba"
                     *ngIf="data.name == 'SG_tieba'"
                >
                    <app-c-tieba
                        [IPPORT] = "IP"
                        [appAutoScale]="projectParmas"
                        [data]="data.data"
                        [answerList]="answerList"
                    ></app-c-tieba>
                </div>
                <div class="c-weibo"
                     *ngIf="data.name == 'SG_weibo'"
                >
                    <app-c-weibo
                        [IPPORT] = "IP"
                        [appAutoScale]="projectParmas"
                        [data]="data.data"
                        [answerList]="answerList"
                    ></app-c-weibo>
                </div>
                <div class="c-qq"
                     *ngIf="data.name == 'SG_QQ'"
                >
                    <app-c-qq
                        [appAutoScale]="projectParmas"
                        [IPPORT] = "IP"
                        [data]="data.data"
                        [answerList]="answerList"
                    ></app-c-qq>
                </div>
                <div class="c-brain"
                     *ngIf="data.name == 'SG_brain'"
                >
                    <app-c-brain
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT] = "IP"
                        [data]="data.data"
                        [socket] = "true"
                        [goldObj] = "goldObj"
                        [answerList]="answerList"
                    ></app-c-brain>
                </div>
                <div class="c-bullet"
                     *ngIf="data.name == 'SG_bullet'"
                     style="z-index: 9999;"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                >
                    <app-c-bullet
                        [data]="data.data"
                        [answerList]="answerList"
                        [height] = "data.style.height"
                    ></app-c-bullet>
                </div>
            </ng-container>
        </div>
    </div>
</div>
